<template>
  <div class="dashboard-container">
    <div class="welcome-section">
      <el-avatar size="large" src="/api/placeholder/100/100"></el-avatar>
      <div class="welcome-text">
        <p>晚上好，系统管理员！</p>
        <p>今日天气晴朗，气温在15℃至25℃之间，东南风。</p>
      </div>
    </div>
    <div class="stats-section">
      <div class="stat-item">
        <div class="stat-title">访客数(UV)</div>
        <div class="stat-value">
          <span>489</span>
          <span class="increase-percentage">↑ 109%</span>
        </div>
        <div class="stat-total">总访客数 10951</div>
      </div>
      <div class="stat-item">
        <div class="stat-title">浏览量(PV)</div>
        <div class="stat-value">
          <span>5352</span>
          <span class="increase-percentage">↑ 162%</span>
        </div>
        <div class="stat-total">总浏览量 170112</div>
      </div>
    </div>
    <div class="trend-section">
      <div class="section-title">访问趋势</div>
      <div class="trend-buttons">
        <el-button type="primary" size="small">近7天</el-button>
        <el-button size="small">近30天</el-button>
      </div>
      <canvas id="trend-chart"></canvas>
    </div>
    <div class="news-section">
      <div class="section-title">最新动态</div>
      <div class="news-item">
        <div class="news-date">2025-03-26 00:00:00</div>
        <div class="news-content">
          <span class="version-tag">v2.4.0</span>
          <span class="news-summary">里程碑：实现基础框架搭建，包含权限管理、路由系统等核心功能。</span>
          <span class="news-link">详情 ></span>
        </div>
      </div>
      <div class="view-all-link">完整记录 ></div>
    </div>
  </div>
</template>

<script setup>
// 可添加数据获取和图表绘制逻辑
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.welcome-section {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.welcome-text {
  margin-left: 10px;
}

.stats-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.stat-item {
  width: 48%;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 15px;
  text-align: center;
}

.stat-title {
  font-size: 16px;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 24px;
  margin-bottom: 5px;
}

.increase-percentage {
  color: #409eff;
  font-size: 14px;
}

.stat-total {
  color: #909399;
  font-size: 12px;
}

.trend-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 18px;
  margin-bottom: 10px;
}

.trend-buttons {
  margin-bottom: 10px;
}

.news-section {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 15px;
}

.news-item {
  margin-bottom: 10px;
  border-bottom: 1px dotted #e4e7ed;
  padding-bottom: 10px;
}

.news-date {
  color: #909399;
  font-size: 12px;
  margin-bottom: 5px;
}

.version-tag {
  background-color: #409eff;
  color: white;
  padding: 2px 6px;
  border-radius: 2px;
  margin-right: 5px;
}

.news-link,
.view-all-link {
  color: #409eff;
  cursor: pointer;
}
</style>